{% extends "admin/base_site.html" %}
{% load i18n static %}
 
{% block content %}
    <div id="myContent" style="margin-left: 60%;margin-top: 50px;">
{#        <form action="/index/" method="post">#}
{#        开始时间: <input type="datetime-local" name="StartData" />#}
{#        结束时间: <input type="datetime-local" name="EndData" />#}
{#    {% csrf_token %}#}
{#    <select name="selec">#}
{#      <option value="CPU">CPU负载</option>#}
{#      <option value="Mem">内存负载</option>#}
{#    </select>#}
{#        <input type="submit" value="查询" class="el-button-success">#}
{#         #}
{#    </form>#}
    <el-form :model="form"  :inline="true"  :model="form" label-width="80px">

          <el-form-item label="接口：">
            <el-select v-model="form.service" placeholder="请选择接口">
              <el-option label="全部" value="shanghai"></el-option>
              <el-option label="接口一" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        {% csrf_token %}
          <el-form-item label="日期：">
            <el-date-picker
              v-model="form.daterange"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              >
            </el-date-picker>
         </el-form-item>



          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>

    </div>

    <br>
{#    border: 1px solid #eecc11;#}
    <div id="main" style="width: 80%; height: 400px;  padding: 40px">
    <script src="/static/echarts.min.js"></script>
        <script>

            let vm =  new Vue({
                  el:'#myContent',

                  created: function() {
                    // 在实例创建完成后执行
                    console.log('created');
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    this.form.daterange=[start,end];


                  },
                data: {
                       msg:'111',
                      form:{
                           daterange: '',
                          service:'全部'
                      },
                      pickerOptions: {
                              shortcuts: [{
                                text: '最近一周',
                                onClick(picker) {
                                  const end = new Date();
                                  const start = new Date();
                                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                  picker.$emit('pick', [start, end]);
                                }
                              }, {
                                text: '最近一个月',
                                onClick(picker) {
                                  const end = new Date();
                                  const start = new Date();
                                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                  picker.$emit('pick', [start, end]);
                                }
                              }, {
                                text: '最近三个月',
                                onClick(picker) {
                                  const end = new Date();
                                  const start = new Date();
                                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                  picker.$emit('pick', [start, end]);
                                }
                              }]
                            }
                  },
                 //定义函数
                 methods:{
                      getCookie:function (name) {
                             var cookieValue = null;
                            if (document.cookie && document.cookie !== '') {
                                var cookies = document.cookie.split(';');
                                for (var i = 0; i < cookies.length; i++) {
                                    var cookie = cookies[i].trim();
                                    // Does this cookie string begin with the name we want?
                                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                        break;
                                    }
                                }
                            }
                            return cookieValue;
                      },
                      onSubmit:function () {
                          console.log("123");
                              // 获取表单内容
                          if(this.form.daterange.length===0 ){
                              this.$message.error('请输入日期后查询');
                          }else {

                          option.xAxis.data = ['18号', '19号', '20号', '21号']
                          option.series=[{
                                data: [23, 25, 84, 47],
                                type: 'line',
                                name:'接口一',

                                label: {
                                show: true,
                                position: 'bottom',
                                textStyle: {
                                  fontSize: 20
                                }},

                            }]
                          let cookie =     getCookie('csrftoken');
                          console.log(cookie)

                          console.log(this.form.daterange[0].toLocaleDateString()); // 在控制台输出表单内容
                          console.log(option.series);
                          mychart.hideLoading();
                          mychart.clear();
                          mychart.setOption(option,true);

                          $.ajax({
                              url: '/query_api', // 目标URL
                              type: 'POST', // 请求方法
                                headers: {
                                'X-CSRFToken':cookie
                              },
                              data: JSON.stringify({
                                start: this.form.daterange[0].toLocaleDateString(), // 要发送的数据
                                end: this.form.daterange[1].toLocaleDateString(),
                                services: this.form.service

                              }),
                              contentType: 'application/json', // 指定数据类型
                              dataType: 'json', // 预期返回数据类型
                              success: function(response) {
                                // 请求成功时的回调函数
                                console.log(response);

                                console.log(response.name[0]);

                              },
                              error: function(xhr, status, error) {
                                // 请求失败时的回调函数
                                console.log(xhr, status, error);
                              }
                            });


                                }
                      }
                 },
                 //监听
                 watch:{

                 },
                })


        var mychart = echarts.init(document.getElementById("main"),"red");
        var option = {
            xAxis: {
                type: 'category',
                name:'日期',
                data: ['18号', '19号', '20号', '21号', '22号']
            },
            yAxis: {
                type: 'value',

                 axisLine:{ show:true},
                name:'准确率',
                 min: 0,
                  max: 100,
                  position: 'left',
                  axisLabel: {
                    formatter: '{value} %'
                  }
            },
              legend: {
        data: ['接口一', '接口二'],
        top: 'top'
        },
              tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#111111FF'
            }
        }
    },
            series: [{
                data: [23, 25, 34, 47, 70],
                type: 'line',
                name:'接口一',

                label: {
                show: true,
                position: 'bottom',
                textStyle: {
                  fontSize: 20
                }},

            },
            {
                data: [10, 40, 54, 88, 90],
                type: 'line',
                name:'接口二',

                label: {
                show: true,
                position: 'bottom',
                textStyle: {
                  fontSize: 20,
                textStyle:'bolder'
                }},

            }


            ],
            title:{
                top:'1%',
            textStyle:{
                    fontSize:'32px',
                    color:'#72080BFF'
            },
                left:'20%',
                show:true,
                text:'准确率比对表'
            }
        };
        mychart.setOption(option)
 
    </script>
 
{% endblock %}